<!-- 分享统计 -->
<template>
  <view class="saveCentent screen-width">
    <view class="option" @click="onDisplay">
      <view class="startTime">{{ startTime ? startTime : "开始时间" }}</view>至
      <view class="endTime">{{ endTime ? endTime : "结束时间" }}</view>
    </view>
    <view class="main">
      <navigator url="/pages/mime/articleRead" class="main_item">
        <view class="main_item_L">文章阅读</view>
        <view class="main_item_R">
          <view class="num">{{ allData.articleReadTotal || 0 }}</view>
          <image src="/static/company/goPage.png" mode />
        </view>
      </navigator>
      <navigator url="/pages/mime/articleTranspond" class="main_item">
        <view class="main_item_L">文章转发</view>
        <view class="main_item_R">
          <view class="num">{{ allData.articleForwardingTotal || 0 }}</view>
          <image src="/static/company/goPage.png" mode />
        </view>
      </navigator>
      <navigator url="/pages/mime/newVisit" class="main_item">
        <view class="main_item_L">新增访问</view>
        <view class="main_item_R">
          <view class="num">{{ allData.addVisitorsTotal || 0 }}</view>
          <image src="/static/company/goPage.png" mode />
        </view>
      </navigator>
      <navigator url="/pages/mime/shareRegister" class="main_item">
        <view class="main_item_L">分享注册</view>
        <view class="main_item_R">
          <view class="num">{{ allData.shareRegisterTotal || 0 }}</view>
          <image src="/static/company/goPage.png" mode />
        </view>
      </navigator>
    </view>
    <!-- 日期选择 -->
    <van-calendar
      v-model="show"
      type="range"
      @confirm="onConfirm"
      color="#4794ff"
      :min-date="minDate"
    />
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      show: false,
      startTime: "", // 开时间
      endTime: "", // 结束时间
      optionData: "", // 日期
      minDate: new Date(1979, 10, 1),
      allData: {} // 统计中心数据
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 处理日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    // 点击确认键
    onConfirm(date) {
      const [start, end] = date;
      this.startTime = `${this.formatDate(start)}`;
      this.endTime = `${this.formatDate(end)}`;
      this.getStatisticsData();
      this.show = false;
    },
    // 获取统计数据
    getStatisticsData() {
      let obj = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.$get(`/bmj-api/api/ums/umsUsers/getCountCenterInfo?`, obj).then(
        res => {
          // console.log(res);
          if (res.code == 200) {
            let { result } = res;
            this.allData = result;
          }
        }
      );
    },
    // 是否显示日历
    onDisplay() {
      this.show = true;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getStatisticsData();
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.saveCentent {
  .option {
    color: #4794ff;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    height: 120rpx;
    background-color: #fff;
    align-items: center;
    .startTime {
      margin-right: 30rpx;
    }
    .endTime {
      margin-left: 30rpx;
    }
  }
  .main {
    padding: 0 30rpx;
    margin-top: 20rpx;
    background-color: #fff;
    .main_item {
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid rgba(204, 204, 204, 0.4);
      font-size: 32rpx;

      .main_item_R {
        display: flex;
        align-items: center;
        .num {
          margin-right: 30rpx;
        }
        image {
          width: 16rpx;
          height: 24rpx;
        }
      }
    }
  }
}
</style>
